<template>
  <div id="edit"></div>
</template>
<script>
export default {
  name: 'edit',
  data () {
    return {}
  },
  mounted () {
    this.editChart()
  },
  methods: {
    editChart () {
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(document.getElementById('edit'))
      let colors = ['#5793f3', '#d14a61', '#675bba']
      let option = {
        color: colors,
        tooltip: {
          trigger: 'none',
          axisPointer: {
            type: 'cross'
          }
        },
        grid: {
          top: 70,
          bottom: 50
        },
        xAxis: [
          {
            type: 'category',
            axisTick: {
              alignWithLabel: true
            },
            axisLine: {
              onZero: false,
              lineStyle: {
                color: '#5793f3'
              }
            },
            axisPointer: {
              label: {
                formatter: function (params) {
                  return '出境人数  ' + params.value + (params.seriesData.length ? '：' + params.seriesData[0].data : '')
                }
              }
            },
            data: ['2019-1', '2019-2', '2019-3', '2019-4', '2019-5', '2019-6', '2019-7', '2019-8', '2019-9', '2019-1', '2019-11', '2019-12']
          },
          {
            type: 'category',
            axisTick: {
              alignWithLabel: true
            },
            axisLine: {
              onZero: false,
              lineStyle: {
                color: '#5793f3'
              }
            },
            axisPointer: {
              label: {
                formatter: function (params) {
                  return '出境人数  ' + params.value + (params.seriesData.length ? '：' + params.seriesData[0].data : '')
                }
              }
            },
            data: ['2018-1', '2018-2', '2018-3', '2018-4', '2018-5', '2018-6', '2018-7', '2018-8', '2018-9', '2018-10', '2018-11', '2018-12']
          }
        ],
        yAxis: [
          {
            type: 'value'
          }
        ],
        series: [
          {
            name: '2019 出境数',
            type: 'line',
            xAxisIndex: 1,
            smooth: true,
            data: [26, 59, 90, 264, 287, 707, 1756, 1822, 487, 188, 60, 23]
          },
          {
            name: '2018 出境数',
            type: 'line',
            smooth: true,
            data: [39, 59, 111, 187, 483, 692, 2316, 466, 554, 184, 103, 7]
          }
        ]
      }
      // 绘制图表
      myChart.setOption(option)
    }
  }
}
</script>
<style lang="less" scoped>
#edit {
  width: 100%;
  height: 300px;
}
</style>
